import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApplicationService } from 'src/app/core/service/application.service';
@Component({
  selector: 'app-app-detail',
  templateUrl: './app-detail.component.html',
  styleUrls: ['./app-detail.component.scss']
})
export class AppDetailComponent implements OnInit {
  title = '';
  appUuid = '';
  // list-init-part
  jarseverityData; // 高危组件列表
  jarnopermissionData; // 未授权列表

  // graph-init-part
  licenseData = {
    legendData: [],
    seriesData: []
  }; // 许可
  cveScoreData = {
    xAxisData: [],
    seriesData: []
  }; // cve得分 

  
  gradeData = {
    legendData: [],
    seriesData: []
  }; // 组件等级
  coefficientData = []; // 总体概况
  //  总体概况-雷达图
  radarOption = {
    title: {
      text: ''
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['Code', '许可', 'CVE'],
      /* textStyle: {
        color: '#fff'
      } */
    },
    radar: [
      {
        indicator: [
          { text: 'Code', max: 1},
          { text: '许可', max: 1},
          { text: 'CVF', max: 1}
        ],
        radius: 120,
        textStyle: {
          color: '#fff'
        }
      }
    ],
    series: [
      {
        type: 'radar',
        radarIndex: 0,
        data: [
          {
            value: this.coefficientData,
            name: '',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value;
                }
              }
            },
            areaStyle: {
                  opacity: 0.9,
                  color: '#B8D3E4'
          }
          }
        ],
        itemStyle: {
          color: '#3398DB'
        }
      }
    ]
  };

  // cveGraph
  barOption = {
    color: ['#3398DB', '#565656'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: this.cveScoreData.xAxisData,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: this.cveScoreData.seriesData
      }
    ]
  };
  // licenseGraph
  pieOption = {
    color: ['#9999ff', '#F56D71', '#A93A40', '#4ddbff', '#FFCD5C', '#258CF5'],
    title: {
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: this.licenseData.legendData,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.licenseData.seriesData,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  // 组件等级 groupGraph
  option = {
  
    tooltip : {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      left: '20', 
      data: this.gradeData.legendData,
      textStyle: {
        color: '#fff'
      }
    },
    color: ['#3398DB','#9999ff', '#F56D71', '#A93A40', '#4ddbff', '#FFCD5C', '#258CF5'],
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : '65%',
            center : ['55%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: true,
                    position: 'inner'
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:this.gradeData.seriesData.sort(function (a, b) { return a.value - b.value; }),
        }
    ]
};
  constructor(
    private activateRoute: ActivatedRoute,
    private applicationService: ApplicationService
  ) { }

  ngOnInit() {
    this.activateRoute.queryParams.subscribe(params => {
      console.log('application', params);
      this.title = params.title;
      this.appUuid = params.appUuid;
      this.getApplicationCoefficient(this.appUuid);
      this.getApplicationGrade(this.appUuid);
      this.getApplicationCVEScore(this.appUuid);
      this.getApplicationLicense(this.appUuid);
      this.getApplicationJarnopermission(this.appUuid);
      this.getApplicationJarseverity(this.appUuid);
    });
  }

  // 高危组件
  getApplicationJarseverity(appUuid: string) {
    this.applicationService.getApplicationJarseverity(appUuid).subscribe(params => {
      console.log('=== Jarseverity ==== ', params);
      this.jarseverityData = params.data;

    });
  }
  // 未授权
  getApplicationJarnopermission(appUuid: string) {
    this.applicationService.getApplicationJarnopermission(appUuid).subscribe(params => {
      // console.log('getApplicationJarnopermission', params);
      if (params.status === 1) {
        this.jarnopermissionData = params.data;
        console.log('=== Jarnopermission ===', this.jarnopermissionData);
      }
    });
  }
  // 获取许可数据
  getApplicationLicense(appUuid: string) {
    this.applicationService.getApplicationLicense(appUuid).subscribe(params => {
      if (params.status === 1) {
        // tslint:disable-next-line: forin
        for (let i in params.data) {
          this.licenseData.legendData.push(params.data[i].name);
          this.licenseData.seriesData.push({
            name: params.data[i].name,
            value: params.data[i].value
          });
        }
        this.pieOption = Object.assign({}, this.pieOption);
        console.log('licenseData', this.licenseData);
      }
    });
  }
  // cve 得分/源代码检测
  getApplicationCVEScore(appUuid: string) {
    this.applicationService.getApplicationCVEScore(appUuid).subscribe(params => {
      if (params.status === 1) {
        console.log('CetScore', params);
        for (let i = 0; i < params.data[0].data.length; i++) {
          this.cveScoreData.xAxisData.push(params.data[0].data[i]);
        }
        for (let i = 0; i < params.data[1].data.length; i++) {
          this.cveScoreData.seriesData.push(params.data[1].data[i]);
        }
        // console.log('=====', this.cveScoreData.xAxisData);
        // console.log('+++++', this.cveScoreData.seriesData);
        this.barOption = Object.assign({}, this.barOption);
      }
    });
  }
  // 组件等级
  getApplicationGrade(appUuid: string) {
    this.applicationService.getApplicationGrade(appUuid).subscribe(params => {
      if (params.status === 1) {
        console.log('grade', params.data);
        // tslint:disable-next-line: forin
        for (let i in params.data) {
          this.gradeData.legendData.push(params.data[i].name);
          this.gradeData.seriesData.push({
            name: params.data[i].name,
            value: params.data[i].value
          });
        }
        console.log('gradeData', this.gradeData);
        this.option = Object.assign({}, this.option);
        console.log('gradeData', this.option);
      }
    });
  }
  // 获取单独应用页面总体概况
  getApplicationCoefficient(appUuid: string) {
    this.applicationService.getApplicationCoefficient(appUuid).subscribe(params => {
      console.log('=== coefficient === ', params);
      // tslint:disable-next-line: forin
      for (let i in params.data) {
        this.coefficientData.push(params.data[i].codeCoefficient);
        this.coefficientData.push(params.data[i].licenseCoefficient);
        this.coefficientData.push(params.data[i].cveCoefficient);
      }
      console.log('coefficientData', this.coefficientData);
      this.radarOption = Object.assign({}, this.radarOption);
    });
  }
}
